<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
		/>
		<meta name="format-detection" content="telephone=yes" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>详情</title>
		<!-- 引入 vant UI 组件库样式文件 -->
		<link rel="stylesheet" href="../common/css/vant-index.css" />
		<link rel="stylesheet" href="../common/css/common.css" />
		<link rel="stylesheet" href="../common/css/swiper.min.css" />
		<link rel="stylesheet" href="../doctor/css/doctor.css" />
		<link rel="stylesheet" href="./css/sku.css" />
		<!-- <link rel="stylesheet" href="./css/index.css" /> -->
		<style type="text/css">
			#app {
				height: 100%;
			}
			body {
				background: #f1f1f1 100%;
			}
			.container {
				padding-bottom: 3%;
			}
			.swiper-container {
				width: 100%;
				/* margin-bottom: 0.34rem; */
			}
			.swiper-slide {
				text-align: center;
				font-size: 18px;
				background: #fff;
				line-height: 3.5rem;
			}
			.good_card {
				position: relative;
				padding: 0.24rem 0.32rem;
				background: #ffffff;
				margin-bottom: 0.24rem;
			}
			.good_tag {
				width: 1.25rem;
				height: 0.54rem;
				line-height: 0.54rem;
				text-align: center;
				font-size: 0.33rem;
				background: #01cd9c;
				color: #ffffff;
				position: absolute;
				top: 0;
				right: 0;
				border-top-right-radius: 0.17rem;
				border-bottom-left-radius: 0.17rem;
			}
			.doctor_left_title {
				background-color: #fff;
				line-height: 1.04rem;
				text-align: center;
				color: #333333;
				font-size: 0.32rem;
				height: 1.04rem;
			}
			.doctor_left_title_border {
				background: #01cd9c;
			}
			.bottom {
				position: fixed;
				bottom: 0;
				background: #fff;
				display: flex;
				align-items: center;
				width: 100%;
				height: 1.06rem;
			}
			.kefu {
				margin-left: 0.24rem;
				margin-right: 0.28rem;
			}
			.kefu img {
				width: 0.48rem;
				height: 0.48rem;
			}
			.gouwuche {
				margin-right: 0.26rem;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.gouwuche img {
				width: 0.48rem;
				height: 0.48rem;
			}
			.leftbtn {
				width: 2.64rem;
				height: 0.84rem;
				background: rgba(1, 205, 156, 0.12);
				border-radius: 0.42rem 0rem 0rem 0.42rem;
				color: #01cd9c;
			}
			.rightbtn {
				width: 2.64rem;
				height: 0.84rem;
				background: #01cd9c;
				border-radius: 0rem 0.42rem 0.42rem 0rem;
				color: #ffffff;
				opacity: 1;
			}
			.btn {
				position: fixed;
				bottom: 0.23rem;
				left: 1.146rem;
				width: 5.21rem;
				height: 0.71rem;
				border-radius: 1.42rem;
				color: #fff;
				background: #01cd9c;
				border: none;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<div class="container">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div
							class="swiper-slide"
							v-for="(item,index) in images"
							:key="index"
						>
							<img :src="item" style="width: 100%" />
						</div>
					</div>
					<div class="swiper-pagination swiper-pagination-white"></div>
				</div>
				<div class="good_card">
					<div
						style="
							display: flex;
							justify-content: space-between;
							align-items: center;
						"
					>
						<span style="font-size: 0.4rem; color: #e22e30"
							>￥{{detail.product_price}}</span
						>
						<span style="color: #999999; font-size: 0.24rem"
							>已售：{{detail.sales||0}}</span
						>
						<!-- <del style="font-size: 0.25rem; color: #999999"
							>￥{{detail.product_price}}</del
						> -->
					</div>
					<div style="margin-top: 0.23rem; font-size: 0.33rem; color: #3e3e3e">
						{{detail.product_name}}
					</div>
					<div style="margin-top: 0.1rem; font-size: 0.29rem; color: #a1a1a1">
						{{detail.product_info}}
					</div>
					<!-- <div class="good_tag" v-if="type == 3">{{detail.service_period}}</div> -->
					<div v-if="detail.product_category!=3">
						<span
							style="font-size: 0.28rem; color: #999999; margin-right: 0.24rem"
							>物流</span
						>
						<span style="font-size: 0.28rem">3天内发货 包邮</span>
					</div>
					<div v-else>
						<span
							style="font-size: 0.28rem; color: #999999; margin-right: 0.24rem"
							>周期：</span
						>
						<span style="font-size: 0.28rem">{{detail.service_period}}</span>
					</div>
				</div>
				<div class="doctor_left_title">商品详情</div>
				<div class="long_photo">
					<img
						:src="detail.product_detail_pic||'./img/1.jpg'"
						style="width: 100%"
					/>
				</div>
				<sku ref="sku"></sku>
				<div class="bottom">
					<div class="kefu" @click="callphone">
						<img src="./img/icon/xaingqingye-kefu.png" />
						<p>客服</p>
					</div>
					<div class="gouwuche" @click="toCar">
						<img src="./img/icon/xiangqingye-gouwuche.png" />
						<p>购物车</p>
					</div>
					<van-button class="leftbtn" @click="handleTocar(detail)"
						>加入购物车</van-button
					>
					<van-button class="rightbtn" @click="handleClick(detail)"
						>立即购买</van-button
					>
				</div>
				<!-- <van-button class="btn" @click="handleClick(detail)"
					>立即购买</van-button
				> -->
			</div>
		</div>
	</body>
	<!-- 引入 rem -->
	<script src="../common/js/rem.js"></script>
	<script src="./js/adjust.js"></script>
	<!-- 上线环境用 -->
	<script src="../common/js/vue.global.prod.js?time=202209061413"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../common/js/vant.min.js"></script>
	<!-- axios 接口调用 -->
	<script src="../common/js/axios.min.js"></script>
	<script src="../base.js"></script>
	<script src="../common/js/url.min.js"></script>
	<script src="../common/js/swiper.min.js"></script>

	<script type="module">
		import {
			getAction,
			postAction,
			spliceUrl,
			getNow,
		} from '../common/js/api/vue3-axios-utils.js'

		import { sku } from './mine.js'

		const PatientData = {
			data() {
				return {
					images: [],
					detail: {},
					price: {},
					id: '',
					type: '',
					show: false,
					pid: '',
				}
			},
			created() {
				this.id = url('?id')
				this.type = url('?type')
				this.pid = url('?pid')
				this.getDetail()
			},
			methods: {
				onClickMiniBtn() {},
				onClickBigBtn() {},
				getDetail() {
					getAction(spliceUrl('/shop/product/detail'), {
						data_id: this.id,
					}).then(res => {
						res = res.data
						if (res.success) {
							this.detail = res.data
							this.detail.patient_id = this.pid
							this.images = res.data.product_banner
							this.$nextTick(() => {
								this.initSwiper()
							})
						}
					})
				},
				initSwiper() {
					new Swiper('.swiper-container', {
						loop: true,
						loopAdditionalSlides: 2,
						autoplay: {
							delay: 2000,
							disableOnInteraction: false,
							stopOnLastSlide: false,
						},
						centeredSlides: true,
						observer: true,
						observeParents: true,
						effect: 'slide',
						pagination: {
							el: '.swiper-pagination',
							clickable: true,
						},
					})
				},
				toCar() {
					window.location.href = './car.html?pid=' + this.pid
				},
				callphone() {
					window.location.href = 'tel://' + 4006677079
				},
				handleTocar(item) {
					if (this.type == 3) {
						postAction(spliceUrl('/shop/cart/add'), {
							patient_id: this.pid,
							product_id: this.id,
							num: 1,
						}).then(res => {
							res = res.data
							if (res.success) {
								this.$toast.success({
									message: '加入成功',
								})
							} else {
								this.$toast.fail({
									message: res.message,
								})
							}
						})
					} else {
						this.$refs.sku.view(item, true)
					}
				},
				handleClick(item) {
					if (this.type == 3) {
						const products = [
							{
								id: this.detail.data_id,
								num: 1,
							},
						]
						sessionStorage.setItem('products', JSON.stringify(products))
						window.location.href =
							'./confirm.html?pid=' + this.detail.patient_id
					} else {
						this.$refs.sku.view(item)
					}
				},
				onBuyClicked() {},
			},
			components: {
				sku,
			},
		}

		const app = Vue.createApp(PatientData)

		app.use(vant)

		// 通过 CDN 引入时不会自动注册 Lazyload 组件
		// 可以通过下面的方式手动注册
		app.use(vant.Lazyload)

		// 调用函数组件，弹出一个 Toast
		// vant.Toast("刷新成功");

		app.mount('#app')
	</script>
</html>
